<template>
	<!-- 资产页面 -->
	  <view class="game-center">	
		<view  class="vux-header">
			<view class="vux-header-left" @click="black()">
				<image src="../../../static/public/img/fanhui.png" style="width: 20px;height: 20px;"></image>
				
				<view class="left-arrow"></view>
			</view>
			<h1 class="vux-header-title"><text style="display: none;"></text></h1>
			<!---->
			<view class="vux-header-right" @click="type(istype)">
				<image src="../../../static/public/img/switch.png" style="width: 13px;height: 13px;vertical-align: middle;"></image>
				<text>东方通信</text>
			</view>
		</view>
		
		<view style="width:100%;border-bottom: 1px solid rgb(98 88 88);float: left;">
			<view style="width:49%;text-align: center;padding-bottom: 3%;border-right: 1px solid rgb(98 88 88);float: left;height: 55px;">
				<view style="color:white;width:100%;font-size: 12px;padding-top: 3%;">{{order_no}}笔</view>
				<view style="color:red;width:100%;font-size: 30rpx;margin-top: 5%;">
					<text v-if="time === '00.00.00'">已截至</text>
					<text v-else>{{time}}</text>
				<text  v-if="time === '00.00.00'"></text>
				<text style="font-size: 22rpx" v-else>截止</text>
				</view>
			</view>
			
			<view style="width:49%;text-align: center;padding-bottom: 3%;float: left;" @click="bk(isbk)">
				<view style="color:white;width:100%;font-size: 12px;padding-top: 3%;">{{top_order_no}}笔<image src="../../../static/public/img/zk.png" style="width: 10px;height: 10px;vertical-align: middle;left: 12%;"></image></view>
				<view style="color:red;width:100%;font-size: 18px;margin-top: 1%;" v-for="(item,index) in list">
					<view :style="{width:'16%',background:item.titleColor, 'text-align': 'center',height: '15px','font-size': '10px','line-height': '13px',color:'white',float: 'left','margin-left': '3%','margin-top': '1%'}">{{item.name}}</view>
				</view>
			</view>	
		</view>	
	
		<view style="width:100%;margin-top: 3%;float: left;padding-bottom: 50%;">
			<view style="width:100%;font-size: 12px;float: left;padding: 2%;" v-for="(item,index) in list2">
				<view :style="{'height': '40px', 'width': '20%','float': 'left','color': 'white','background': item.titleColor,'line-height': '40px','text-align': 'center'}">{{item.name}}</view>
				
				<view :style="{'height': '40px', 'width': item.width+'%','float': 'left','color': 'white','background': index<5 ? '#ff4c4f' : '#35bf48','line-height': '40px'}"> 
				</view>
				<button :style="{'width': '20%','font-size': '12px','background': [item.ids===index ? 'white' : 'red'],'color': [item.ids===index ? 'red' : 'white'],'height': '40px','line-height': '40px','position': 'absolute','right': '15px'}"   @click="buy(item,index)">立即购买</button>
			</view>
		</view>
		
		<view v-if="isgd" style="bottom: 50px;left: 0;right: 0;width: 30%;position: fixed;background-color: #666; font-size: 12px;color: white;z-index: 99999;">
			<view style="height: 50px;line-height: 50px;text-align: center;border:1px solid white;" @click="gobetList()">
				投资记录
			</view>
			<view style="height: 50px;line-height: 50px;text-align: center;border:1px solid white;">
				声音提醒：开启
			</view>
		</view>
		<view v-if="isgd" style="background: red;width:100%;height: 100%;z-index: 9999;position: absolute;top: 0;opacity: 0.0;" @click="gd(isgd)"></view>
		<view style="bottom: 0;left: 0;right: 0;width: 100%;height: 50px;position: fixed;background-color: #666;">
			<view style="width:15%;height: 50px;float: left;text-align: center;border-right: 1px solid #7f7b7b;" @click="gd(isgd)">
				<image src="../../../static/public/img/gd.png" style="width: 18px;height: 18px;vertical-align: middle;top:28%"></image>
			</view>
			<view style="width:15%;height: 50px;float: left;text-align: center;border-right: 1px solid #7f7b7b;">
				<image src="../../../static/public/img/shanchu.png" style="width: 18px;height: 18px;vertical-align: middle;top:28%" @click="gouwuche()"></image>
				<text style="width: 16px;height: 16px;background-color: red;border-radius: 50%;display: inline-block;color: #ffffff;font-size: 12px;line-height: 14px;text-align: center;">{{data.length}}</text>
			</view>
			<view style="width:15%;height: 50px;float: left;text-align: center;border-right: 1px solid #7f7b7b;">
				<image src="../../../static/public/img/shanchu.png" style="width: 18px;height: 18px;vertical-align: middle;top:28%" @click="deletes()"></image>
			</view>
			<view style="width:30%;height: 50px;float: left;text-align: center;border-right: 1px solid #7f7b7b;line-height: 50px;font-size: 15px;font-weight: 700;">
				<text style="color: #f90;">{{num}}</text><text style="color: #fff;">笔</text>
			</view>
			
			<view style="width:24%;height: 50px;float: left;text-align: center;line-height: 50px;font-size: 15px;background-image: linear-gradient(180deg,#e6b87a,#d49a53 80%);" @click="create()">
				投资
			</view>
		</view>
		
		
		<view v-if="isbk" style="background: black;width:100%;height: 100%;z-index: 9999;position: absolute;top: 0;opacity: 0.5;" @click="bk(isbk)"></view>
		<view v-if="isbk" style="width: 100%;bottom: 0;left: 0;right: 0;position: fixed;height: 40%;background: white;text-align: center;font-size: 15px;z-index: 99999;">
			<view style="width: 100%;height: 40px;line-height: 40px;border-bottom: 1px solid #d7d7d7;background: #f6f6f6;color:#8c8686">版块排行</view>
			<view style="width:100%;" v-for="(item,index) in list3">
				<view style="width: 6%;font-size: 12px;height: 20px;line-height: 20px;float: left;margin-left: 1%;margin-top: 1%;color:#999">{{item.order}}</view>
				<view :style="{'width': '8%','font-size': '12px','background': e.titleColor,'color': 'white','height': '20px','line-height': '20px','float': 'left','margin-left': '1%','margin-top': '1%'}" v-for="(e,v) in item">{{e.name}}</view>

			</view>
		</view>
		
		<view v-if="istype" style="width: 80%;bottom: 0;left: 0;right: 0;position: fixed;height: 100%;background: white;z-index: 99999;">
			<button style="width: 30%;font-size: 12px;border-radius: 12px;float: left;background: #f5f5f5;color:#b0abab;border:none;margin-left: 2%;margin-top: 8%;" @click="xztype(1)">高斯贝尔</button>
			<button style="width: 30%;font-size: 12px;background-image: linear-gradient(180deg,#e6b87a,#d49a53 80%)!important;border-radius: 12px;float: left;border:none;margin-left: 2%;margin-top: 8%;" @click="xztype(2)">东方通信</button>
			<button style="width: 30%;font-size: 12px;border-radius: 12px;float: left;background: #f5f5f5;color:#b0abab;border:none;margin-left: 2%;margin-top: 8%;" @click="xztype(3)">立讯精密</button>
		</view>
		<view v-if="istype" style="background: black;width:100%;height: 100%;z-index: 9999;position: absolute;top: 0;opacity: 0.5;" @click="type(istype)"></view>
	
	    <view v-if="istz" style="font-size: 14px;width:80%;height: 300px;background: white;z-index: 999999;position: fixed;left: 10%;top: 25%;border-radius: 5px;">
			<view style="width: 100%;text-align: center;font-size: 16px;color:#999;border-bottom: 1px solid #d7d7d7;height: 50px;line-height: 50px;">投资设定</view>
			<view style="margin-left: 10%;margin-top: 10%;">回报率：1.98</view>
			<view style="margin-left: 10%;margin-top: 3%;">投资金额：10元</view>
			<view style="float: left;margin-left: 15%;margin-top: 3%;">手数：</view>
			<view @click="jian()" style="font-size: 24px;margin-top: 3%;float: left;color:#cd0006;width:20px;height: 20px;background-color: #f2f2f2;text-align: center;line-height: 20px;">-</view>
			<input type="number" :value="number" style="width:15%;float: left;margin-top: 3%;text-align: center;font-size: 14px;">
			<view @click="jia()" style="font-size: 24px;margin-top: 3%;float: left;color:#cd0006;width:20px;height: 20px;background-color: #f2f2f2;text-align: center;line-height: 20px;">+</view>
		    <view style="float: left;width:100%;margin-left: 10%;margin-top: 3%;">
				<text>笔数：{{num}}笔</text>
				<text style="margin-left: 10%;">总额：{{num*number*10}}元</text>
			</view>
			<view style="float: left;width:100%;margin-left: 10%;margin-top: 3%;">若获利，单笔最高获利<text style="color:red;">{{num*number*10*0.98}}</text>元</view>
		    <view style="margin-top: 8%;width:49.5%;height: 50px;line-height: 50px;text-align: center;float: left;border-top: 1px solid #f2efef;border-right: 1px solid #f2efef;" @click="qxtz()">取消</view>
			<view style="color: #cd0006;margin-top: 8%;width:50%;height: 50px;line-height: 50px;text-align: center;float: left;border-top: 1px solid #f2efef;" @click="createOrder()">确认</view>
		</view>
		<view v-if="istz" style="background: black;width:100%;height: 100%;z-index: 99999;position: absolute;top: 0;opacity: 0.5;" @click="tz(istz)"></view>
		
		<view v-if="isjz"  style="color:#999;font-size: 14px;width:70%;height: 150px;background: white;z-index: 999999;position: fixed;left:15%;top: 25%;border-radius: 5px;">
			<view style="width: 100%;text-align: center;margin-top: 5%;font-size: 16px;">温馨提示</view>
			<view style="width: 100%;text-align: center;margin-top: 5%;">2022123281笔已经截至当前笔数<text style="color: #cd0006;">2022123281</text>投资时请注意笔数</view>
		    <view style="color: #cd0006;border-top: 1px solid #f2efef;text-align: center;padding-top: 5%;margin-top: 5%;font-size: 18px;" @click="isjzs()">确认</view>
		</view>
		<view v-if="isjz" style="background: black;width:100%;height: 100%;z-index: 99999;position: absolute;top: 0;opacity: 0.5;" @click="tz(istz)"></view>
	 </view>
    
</template>

<script>
	import timeHMS from '../../../common/timeHMS.js';
	export default {
		data() {
			return {
              isgd:false,
			  isbk:false,
			  istype:false,
			  istz:false, 
			  num:0,
			  list:[],
			  open_issue:'',
			  list2:[],
			  list3:[],
			  order_no:'',
			  top_order_no:'',
			  times:'',
			  time:'Loding...',
			  timeHMS,
			  timer:null,//定义计时器，以便全局访问
			  ids:10,
			  nu:0,
			  created:[],
			  number:1,
			  isjz:false,//截止弹窗 true显示
			  arr:[],
			  data:[],
			}
		},
		methods: {
			jian(){
				if(this.number == 1){
					return
				}else{
					this.number=this.number-1;
				}
			},
			jia(){
				this.number=this.number+1;
			},
			qxtz(){
				this.istz=false; 
			},
			isjzs() {
				this.isjz = false;
			},
            gd(e){
				if(e==false){
					this.isgd=true;
				}else{
					this.isgd=false;
				}
			},
			bk(e){
				if(e==false){
					this.isbk=true;
				}else{
					this.isbk=false;
				}
			},
			type(e){
				if(e==false){
					this.istype=true;
				}else{
					this.istype=false;
				}
			},
			tz(e){ 
				if(e==false){
					this.istz=true;
				}else{
					this.istz=false;
				}
			},
			xztype(e){
				this.istype=false;
				console.log(e)
				if(e == 1){
					uni.navigateTo({
						url:'/pages/components/gameCenter/gameCenter'
					})
				}else if(e == 2){
					uni.navigateTo({
						url:'/pages/components/gameCenter/gameCentertow'
					})
				}else if(e == 3){
					uni.navigateTo({
						url:'/pages/components/gameCenter/gameCenterfire'
					})
				}

			},
			black(){
				uni.navigateBack();
			},
			gobetList(){
				uni.navigateTo({
					url:'/pages/components/betList/betList'
				})
			},
			buy(items,index){
				
				if(this.list2[index].ids == undefined){
					this.list2[index].ids = index;
					this.num==this.num++;
					this.created += items.id+',';
					const str = this.created;
					this.created = str.split(',') ;
					this.arr.push(items);
				}else{
					this.list2[index].ids = undefined;
					this.num==this.num--;
					this.created = this.created.filter(item => item != items.id);
					this.arr = this.arr.filter(item => item.id != items.id);
				}
				
			},
			create(){
				if(this.created.length <= 1) {
					return this.$api.msg("至少选择1注");
				}
				//打开弹窗
				this.istz=true;
				let that = this
				// that.createOrder()
			},
			createOrder(){
				if(this.created.length <= 1) {
					return this.$api.msg("至少选择1注");
				}
				// this.arr
				for (var i=0;i<this.arr.length;i++) {
					this.arr[i]['unit'] = this.number*10
				}
				this.num = 0;
				if(Array.isArray(uni.getStorageSync('shopdf'))) {
					this.arr.push.apply(this.arr,uni.getStorageSync('shopdf'))
					uni.setStorageSync('shopdf',this.arr);
				}else {
					uni.setStorageSync('shopdf',this.arr);
					
				}
				this.istz=false;
				// this.deletes()
				uni.navigateTo({
					url:'/pages/components/gameCart/gameCarttow'
				})
				this.arr = [];
				for (var i=0;i<this.list2.length;i++) {
					console.log(this.list2[i]);
					if(this.list2[i].ids != 'undefined'){
						this.list2[i].ids = undefined;
					}
				}
				// this.$api.request('/api/game/createOrder',{type:1,order:this.order_no,number:this.created,unit:this.number*10}).then((res)=>{
				// 	this.istz=false; 
				// 	return this.$api.msg(res.message)
				// })
			},
			deletes(){
				this.num = 0;
				this.arr = [];
				uni.setStorageSync('shopdf','');
				// uni.setStorageSync('unit','');
				this.created.length = [];
				
				for (var i=0;i<this.list2.length;i++) {
					console.log(this.list2[i]);
					if(this.list2[i].ids != 'undefined'){
						this.list2[i].ids = undefined
					}
				}
			},
			gouwuche() {
				uni.navigateTo({
					url:'/pages/components/gameCart/gameCarttow'
				});
			},
			getGame(){
				this.$api.request('/api/game/list',{type:2}).then(res=>{
					this.list = res.data.game_list
					this.list2= res.data.game_list_tow
					this.list3= res.data.game_number
				});
			},
			connectSocket() {
				let that = this;
				console.log('调用连接websocket');
				uni.showLoading({
					title:'Loding...'
				})
				this.socketTask = uni.connectSocket(
					{
						url: 'ws://172.30.143.46:2346',
						success(res) {
							console.log("连接成功",);
						},
						fail(err) {
							// console.lozen'mg("报错", err);
						}
					},
				);
				this.socketTask.onOpen(function(res) {
					that.sendSocketMessage();
					// console.log('WebSocket连接已打开！');
					that.isSuccess = true;
				})
				this.socketTask.onMessage(function(res) {
					// console.log('收到服务器内容：' + res.data);
					uni.hideLoading();
					const data = JSON.parse(res.data);
					if(data.type == 2){
						that.order_no = data.order_no
						that.top_order_no = data.top_order_no
						// that.times = data.message
						
						that.timer=setInterval(()=>{
							//调用定义的事件，进行倒计时操作，传入需要结束的时间戳
							// that.countDown('1672313510');
							that.countDown(data.end_time);
						},1000)
								
					}

				});
				this.socketTask.onError(function(res) {
					// console.log(123)
					//进入重新连接
					this.reconnect();
				})
			},
			sendSocketMessage(msg) {
				this.socketTask.send({
					data: JSON.stringify({"type":2}),
				});
			},
			countDown(endtime){
				//判断倒计时是否为0，如果为零即可清楚计时器
				if(this.timeHMS(endtime) == '00.00.00'){
					clearInterval(this.timer)
					this.sendSocketMessage()
					this.getGame()
					uni.setStorageSync('shopdf','')
					// uni.setStorageSync('unit','')
					this.num=0
				}
				this.time = this.timeHMS(endtime);
			}
			
		},
		watch:{
			time(num){
				if(num == '00.00.00') {
					this.isjz = true;
					setTimeout(()=> {
						this.isjz = false;
					},3000)
				}
			}
		},
		onLoad() {
			this.data = uni.getStorageSync('shopdf');
			this.getGame();
			this.connectSocket();
		},
		

	}
</script>

<style lang="scss">
	    .game-center {
	        background: url(../../../static/public/img/playbg.61caa3c.jpg) no-repeat 50% 50%;
	        background-size: cover;
	    }
		.game-center{
		    overflow: hidden;
		    width: 100%;
		    height: 100%;
		}
		.vux-header {
		        border-bottom: 0.013333rem solid #6b6262; 
		        background: none!important;
				height: 70px;
		}
		.vux-header .vux-header-left, .vux-header .vux-header-right {
		    top: auto;
		}
		.vux-header .vux-header-left {
		    left: 18px;
		}
		.vux-header .vux-header-left, .vux-header .vux-header-right {
		    position: absolute;
		    top: 33px;
		    display: block;
		    font-size: 14px;
		    line-height: 21px;
		    color: #fff;
		}
		.vux-header .vux-header-left .left-arrow {
		    position: absolute;
		    width: 30px;
		    height: 30px;
		    top: -5px;
		    left: -5px;
		}
		 .vux-header .vux-header-right{
		        position: absolute;
		        top: 33px;
		        display: block;
		        font-size: 12px;
		        line-height: 21px;
		        color: #fff;
		        left: 80%;
		}
	
</style>
